<?
require_once (__DIR__ . '/../../models/Accounts.php');
require_once (__DIR__ . '/../../models/Products.php');
$results = products::GetAll();
RequireLogin();
?>
				<? if(isset($_GET['inserted'])): ?>
				    <div class="alert alert-success">
					    <button type="button" class="close">×</button>
					    A product has been successfuly added.
				    </div>
				<? endif; ?>
        
        <? if(isset($_GET['removed'])): ?>
				    <div class="alert alert-success">
					    <button type="button" class="close">×</button>
					    A product has been successfuly removed.
				    </div>
				<? endif; ?>
				<div class="alert alert-success hide" id="success-message">
					    <button type="button" class="close">×</button>
					    A product has been successfuly updated.
				</div>
				<div class="alert alert-error hide" id="error-message">
					    <button type="button" class="close">×</button>
					    <span></span>
				</div>

				<a href="<?=$rootUrl?>/../W/Products/edit" class="create-new">+ Create New</a>
				
				<form action="<?=$rootUrl?>/../W/Products/edit" method="post">
					<table class="table table-bordered table-condensed table-hover table-striped">
						<thead>
							<tr>
                <th>Name</th>
                <th>Price</th>
                <th>Description</th>
                <th>Quantity</th>
                <th>Actions</th>
						</tr>
						</thead>
						<tbody>
							<?while($row = $results->fetch_assoc()):?>
								<? include('item.php'); ?>
							<? endwhile; ?>
						</tbody>
					</table>
				</form>
        
				<table>
							<tr class="hide" id="form-elements">
						    	<td><input name="Name" class="Name" placeholder="Name" type="text"  /></td>
						    	<td><input name="Price" class="Price" placeholder="Price" type="text" /></td>
						    	<td><input name="Description" class="Description" placeholder="Description" type="text" /></td>
						    	<td><input name="Quantity" class="Quantity" placeholder="Quantity" type="text" /></td>
						    	<td>
						    		
						    	</td>
						    	<td>
						    		<input name="id" class="id" type="hidden"  />
						    		<input type="submit" value="Save" class="btn" />
						    	</td>
						    </tr>
				</table>
        
		    <div id="delete-box" class="modal hide fade">
			    <div class="modal-header">
				    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				    <h3>Delete</h3>
			    </div>
			    <div class="modal-body">
				    
			    </div>
		    </div>
		    
		<script type="text/javascript">
			function TransformToTr(html)
			{
				return $(html).find(".control-group").wrapAll("<tr class='edit-form' />").wrap("<td />")
					.find("input").attr('placeholder', function(){
						return $(this).closest("td").find("label").hide().text();
					})
					.closest("tr").find("label").hide()
					.closest("tr");				
			}
			function CancelEdit()
			{
				$(".edit-form").first().prev().show().end().remove();
			};
			$(function(){
				/*$("table").dataTable({
          "bJQueryUI": true,
          "sPaginationType": "full_numbers"
        });*/
				
        $(".close").click(function(){
					$(this).closest(".alert").slideUp();
				});
				$(".error").removeClass('error', 'slow');
        
        // Move prompt within DOM
        $('body > div:first-child').after($('#delete-box').detach());
        
        // Set up create new
				$(".create-new").click(function(e){
          $("#delete-box h3").text('Create New');
					$("#delete-box").modal({'show':true });
					$.get(this.href, function(data){
						$("#delete-box").find(".modal-body").html($(data).find("form"));
					});
          e.preventDefault();
					return false;
				});
        
        // Set up delete links
				$(".delete-link").live('click', function(e){
          $("#delete-box h3").text('Delete');
					$("#delete-box").modal({'show':true });
					$.get(this.href, function(data){
						$("#delete-box").find(".modal-body").html($(data).find("form"));
					});
          e.preventDefault();
					return false;
				});
        
        // Set up detail links
        $('.details-link').live('click', function(e){
          $("#delete-box h3").text('Details');
					$("#delete-box").modal({'show':true });
					$.get(this.href, function(data){
						$("#delete-box").find(".modal-body").html($(data).find("dl"));
					});
          e.preventDefault();
					return false;
				});
        
        // Set up edit links
				$(".edit-link").live('click', function(){
					CancelEdit();
					var $tr = $(this).closest("tr").hide();
					$.get(this.href, {date: new Date() } , function(data){
						$tr.after(TransformToTr(data));
					});
					return false;
				});
				$(".edit-form button").live('click',function(){
						CancelEdit();
				});
				$("form").submit(function(){
						$.post(this.action + '?ajax=json', $(this).serialize() , function(data){
							if(data.status=='success')
								$('#success-message').fadeIn();
							else{								
								$('#error-message').fadeIn().find('span').html($.map(data.errors, function(val, key){
									return $("<div />").text(key + ': ' + val);
								}));								
							}
              
              
							if(data.status != 'success')
							{
								$tr2 = $("<tr />").html($("#form-elements").html());
								$(".edit-form").replaceWith( $tr2 );
								$tr2
										.find(".Name").val(data.contents.Name).end()
										.find(".Price").val(data.contents.Price).end()
										.find(".Description").val(data.contents.Description).end()
										.find(".Quantity").val(data.contents.Quantity).end()
										.find(".id").val(data.contents.id);
							}else{
                var edit_controls = '<a href="' + location.href.split('?')[0] + 'details/' + data.contents.id + '" class="details-link">Details</a> '
                                  + '<a href="' + location.href.split('?')[0] + 'edit/' + data.contents.id + '" class="edit-link">Edit</a> '
                                  + '<a href="' + location.href.split('?')[0] + 'delete/' + data.contents.id + '" class="delete-link">Delete</a>';
                
								$(".edit-form").replaceWith(
									$("<tr />")
										.append($("<td />").text(data.contents.Name))
										.append($("<td />").text(data.contents.Price))
										.append($("<td />").text(data.contents.Description))
										.append($("<td />").text(data.contents.Quantity))
										.append($("<td />").html(edit_controls))
								);								
							}
						}, 'json');
						return false;
				});
				$.get('edit', function(html){
					TransformToTr(html).appendTo("tbody:first");
				});
				
			});
		</script>
